/** @type {import('tailwindcss').Config} */

// 引入自定义插件
const myPlugin = require("./src/plugins/my-plugin.js");

module.exports = {
  // content: 指定需要扫描的文件路径，Tailwind 会检测这些文件中使用的类名
  // 用于 Tree-shaking，只保留实际使用的 CSS，优化最终构建文件大小
  content: ["./src/**/*.{html,js}"],

  // theme: 定义设计系统的核心配置
  theme: {
    // extend: 扩展默认主题配置，不会覆盖 Tailwind 的默认值
    extend: {
      // fontSize: 自定义字体大小配置
      // 使用方式: text-35 (对应 35px)
      fontSize: {
        '35': '35px', // 定义 35px 的字体大小
      },

      // boxShadow: 自定义盒子阴影效果
      // 使用方式: shadow-custom
      boxShadow: {
        custom: "0 0 0.1em rgba(0, 0, 0, 0.3)", // 自定义阴影效果
      },

      // borderRadius: 自定义边框圆角
      // 使用方式: rounded-15p
      borderRadius: {
        "15p": "15%", // 15% 的圆角
      },

      // brightness: 自定义亮度滤镜值
      // 使用方式: brightness-100, brightness-115 等
      brightness: {
        '100': '1',    // 正常亮度 (100%)
        '115': '1.15', // 115% 亮度
        '130': '1.3',  // 130% 亮度
        '145': '1.45', // 145% 亮度
      },
    },
  },

  // plugins: 插件配置数组
  // 用于扩展 Tailwind 的功能，添加自定义工具类、组件或变体
  plugins: [myPlugin], // 引入自定义插件
};

